<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>出库记录</title>
		<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> -->
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		
		<!-- 显示入库信息的表格 -->
		<!-- <div class="row1">
			<table class="table table-striped table-hover table-bordered" id="test">
				<thead>
					<tr>
						<th>编号</th>
						<th>药品名</th>
						<th>出库数量</th>
						<th>出库时间</th>
						<th>病人编号</th>
					</tr>
				</thead>
				<tbody id="tbody1">
		
				</tbody>
			</table>
		</div>
		
		<div class="row1">
		    <div id="msg"></div>
		</div> -->
		<fieldset class="table-search-fieldset">
		    <legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<!-- 查询框 -->
					<form class="layui-form layui-form-pane layui-inline" style="width: 600px;">
						<div class="layui-inline">
							<label class="layui-form-label">药品名</label>
							<div class="layui-input-block">
							  <input type="text" name="medName" lay-verify="required" placeholder="请输入药品名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit=""  lay-filter="demo1">查询</button>
							</div>
						</div>
					</form>
				</div>
		</fieldset>
		
		<table class="layui-hide" id="test" lay-filter="test"></table>
		
		<!-- <script src="bootstrap/js/bootstrap.js"></script> -->
		<script src="js/jquery-3.4.1.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['table','form'], function(){
				  var table = layui.table,
				  form=layui.form,
				  $=layui.jquery;
				  
				  tableIn = table.render({
					elem: '#test'
					,url:'http://localhost:8081/query/showOutRecord'
					,title: '出库表'
					,toolbar: '#toolbarDemo'
					,id:'outSto'
					,cols: [[
					  {field:'outId', title:'编号', width:120, fixed: 'left', unresize: true}
					  ,{field:'medName', title:'药品名'}
					  ,{field:'outStorageNum', title:'出库数量'}
					  ,{field:'outDate', title:'出库时间'}
					  ,{field:'patientId', title:'病人编号'}
					]]
					,page: true
				  });
				  
				  // 监听搜索操作
				  form.on('submit(demo1)', function (data) {
					  // layer.alert(JSON.stringify(data.field), {
					  //   title: '最终的提交信息'
					  // });
	
						//执行搜索重载
						table.reload('outSto', {
							page: {
								curr: 1
							}
							, where: {
								medName : data.field.medName
							}
						}, 'data');
									
					  return false;
				  });
			});
			
		// 	$(function () {
		// 		//定义个用来给表格中装载数据的函数
		// 		var fillToTable = function (outStos) {
		// 			var tbody1 = $("#tbody1");
		// 			tbody1.empty();
		// 			$.each(outStos, function (index, outSto) {
		// 				var tr = $("<tr>");
		// 				var td = $("<td>");
		// 				td.text(outSto.outId);
		// 				tr.append(td);
						
		// 				td = $("<td>");
		// 				td.html("" + outSto.medName);
		// 				tr.append(td);
		
		// 				td = $("<td>");
		// 				td.html("" + outSto.outStorageNum);
		// 				tr.append(td);
						
		// 				td = $("<td>");
		// 				td.html("" + outSto.outDate);
		// 				tr.append(td);
		
		// 				td = $("<td>");
		// 				td.html("" + outSto.patientId);
		// 				tr.append(td);
		
		// 				tbody1.append(tr);
		// 			});
		// 		};
		
		// 		//发送请求获取最新疫情数据
		// 		$.ajax({
		// 			type:"get",
		// 			url:"http://localhost:8081/query/showOutRecord",
		// 			async:true,
		// 			contentType:"application/json;charset=UTF-8",
		// 			xhrFields: {
		// 				withCredentials: true
		// 			},
		// 			success:function(res){
		// 				// sessionStorage.setItem("userName",res.data);
		// 				console.log(res);
		// 				// fillToTable(resp.data);
		// 				if(res.code==0){
		// 					fillToTable(res.data);
		// 				}
		// 				$('#msg').val(res.msg);
		// 			}
		// 		});
		// 	});
			
		</script>
		
	</body>
</html>
